<template>
  <view class="delivery-form-page">
    <Form ref="form" :model="model" :rules="rules">
      <FormItem v-if="field=='phone'" label="外送电话" text-align="right">
        <input v-model="formData.phone" type="number" />
      </FormItem>
      <FormItem v-if="field=='range'" label="外送范围(公里)" text-align="right">
        <input v-model.number="formData.range" type="number" placeholder="最多两位小数" @blur="handleChangePrice('range')" />
      </FormItem>
      <FormItem v-if="field=='startPrice'" label="起送价格(元)" text-align="right">
        <input v-model.number="formData.startPrice" type="number" placeholder="最多两位小数" @blur="handleChangePrice('startPrice')" />
      </FormItem>
      <FormItem v-if="field=='boxFee'" label="打包费(元)" text-align="right">
        <input v-model.number="formData.boxFee" type="number" placeholder="最多两位小数" @blur="handleChangePrice('boxFee')" />
      </FormItem>
    </Form>
    <SaveButton :fixed="false" @click="handleSubmit"></SaveButton>
  </view>
</template>

<script>
import { mapState } from "vuex";
import Form from "../../../components/public/Form/index.vue";
import FormItem from "../../../components/public/FormItem/index.vue";
import SaveButton from "../../../components/public/Button/SaveButton.vue";
export default {
  components: {
    Form,
    FormItem,
    SaveButton
  },
  props: {
    field: {
      type: String,
      default() {
        return "";
      }
    }
  },
  directives: {
    // float: {
    //   bind: function(el, binding) {
    //     const { value } = binding;
    //     // let { formData, key } = value;
    //     // el.addEventListener("change", v => {
    //     //   console.log(value);
    //     //   // if (value.formData[key] || value.formData[key] === 0) {
    //     //   //   let value = Number(value.formData[key]);
    //     //   //   value.formData[key] = parseFloat(value.toFixed(2));
    //     //   // }
    //     // });
    //   },
    //   update: function(el, binding) {
    //     const { value } = binding;
    //     console.log(value)
    //     // let { formData, key } = value;
    //     // el.addEventListener("change", v => {
    //     //   // console.log(value);
    //     //   // if (value.formData[key] || value.formData[key] === 0) {
    //     //   //   let value = Number(value.formData[key]);
    //     //   //   value.formData[key] = parseFloat(value.toFixed(2));
    //     //   // }
    //     // });
    //   }
    // }
  },
  data() {
    return {
      formData: {
        phone: "",
        range: "",
        startPrice: "",
        boxFee: ""
      },
      rules: {
        phone: [
          { required: true, message: "请填写外送电话", length: 11 },
          { min: 6, max: 11, message: "请填写正确的电话号码" }
        ],
        range: { required: true, message: "请填写外送范围" },
        startPrice: { required: true, message: "请填写起送价格" },
        boxFee: { required: true, message: "请填写打包费" }
      }
    };
  },
  computed: {
    ...mapState({ deliveryData: state => state.delivery.data }),
    model() {
      let form = {};
      form[this.field] = this.formData[this.field];
      return form;
    },
    _this() {
      return this;
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      for (let key in this.formData) {
        this.formData[key] = this.deliveryData[key];
      }
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit("submit", this.model);
        }
      });
    },
    handleChangePrice(key) {
      if (this.formData[key] || this.formData[key] === 0) {
        let value = Number(this.formData[key]);
        this.formData[key] = parseFloat(value.toFixed(2));
      }
    }
  }
};
</script>

<style scoped lang="scss">
.delivery-form-page {
}
</style>
